<template>
  <div class="flexac" style="position: relative;;flex-direction: column;">
    <div style="position: absolute;top: -20px;left: 50%;transform: translate(-50%,0);font-size: 12px;color: #0f0;" v-show="addTreeShow">+1</div>
    <div class="scale12" @click="addTreeNum">树林</div>
  </div>
</template>
  
  <script>
export default {
  name: "tree-",
  props: ["treeNum"],
  data() {
    return {
      tree: 0,
      timer: null,
      addTreeShow:false,
    };
  },
  mounted() {},
  methods: {
    addTreeNum() {
      if (this.timer) {
        this.addTreeShow = false
        clearInterval(this.timer);
        this.timer = null;
      } else {
        this.addTreeShow = true
        this.timer = setInterval(() => {
          this.tree++;
          this.$emit("getData", this.tree);
        }, 200);
      }
    },
  },
  watch: {
    treeNum(newVal) {
      this.tree = newVal;
    },
  },
};
</script>
  
  <style scoped>
</style>